<template>
  <div id="App">
    <input
      type="file"
      ref="upload"
      accept=".xls,.xlsx"
      class="outputlist_upload"
    />
    ------------------
    <el-button type="primary" size="small">
      <download-excel
        class="export-excel-wrapper"
        :data="tableDataDownload"
        :fields="json_fields"
        name="职位信息Excel"
      >
      </download-excel>
    </el-button>

    <!-- <div class="swiper-container">
      <ul class="project-box flexbox swiper-wrapper">
        <li class="swiper-slide">1</li>
        <li class="swiper-slide">2</li>
        <li class="swiper-slide">3</li>
      </ul>
      <div class="swiper-pagination"></div>
    </div> -->
  </div>
</template>

<script>
import XLSX from "xlsx";
import getHotel from '@/assets/getHotel.js'
export default {
  data() {
    return {
      outputs: [],
      tableDataDownload: [],
      json_fields: {
        address: "addr",
        gcj02Lat:'gcj02Lat',
        gcj02lon:'gcj02lon',
        wgs84Lat:'wgs84Lat',
        wgs84Lon:'wgs84Lon',
        lat:'lat',
        lon:'lon',
        logs:'logs',
      },
    };
  },
  created() {
    this.tableDataDownload = getHotel;
  },
  mounted() {
    this.$refs.upload.addEventListener("change", (e) => {
      //绑定监听表格导入事件
      this.readExcel(e);
    });
  },
  methods: {
    readExcel(e) {
      //表格导入
      var that = this;
      const files = e.target.files;
      console.log(files);
      if (files.length <= 0) {
        //如果没有文件名
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }

      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
          console.log(JSON.stringify(ws));
          that.outputs = []; //清空接收数据
          for (var i = 0; i < ws.length; i++) {
            var sheetData = {
              address: ws[i].addr,
              value: ws[i].value,
            };
            that.outputs.push(sheetData);
          }
          this.$refs.upload.value = "";
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    },
  },
};
</script>
<style>
html,
body {
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100vh;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  background: red;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
}
.swiper-pagination {
  position: absolute;
  right: -90%;
  top: 20px;
}
</style>